<template>
  <div class="q-pa-md q-gutter-sm">
    <t-button label="点击我" color="primary" @click="inception = true" />

    <t-dialog v-model:show="inception">
      <t-card>
        <t-card-section>
          <div class="text-h6">嵌套弹出框</div>
        </t-card-section>

        <t-card-section class="t-pt-none">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis laudantium minus earum totam modi laborum illo, corporis fuga saepe animi aliquam ea enim assumenda ut nulla natus aperiam quis. Iste.
        </t-card-section>

        <t-card-section align="right" class="q-pa-md q-gutter-sm">
          <t-button flat label="打开另一个弹出框" @click="secondDialog = true" class="tr-button-default"/>
          <t-button flat label="关闭" @click="inception = false" class="tr-button-default"/>
        </t-card-section>
      </t-card>
    </t-dialog>

    <t-dialog v-model:show="secondDialog" persistent transition-show="scale" transition-hide="scale">
      <t-card style="width: 300px">
        <t-card-section>
          <div class="text-h6">Persistent</div>
        </t-card-section>

        <t-card-section class="t-pt-none">
         我也是一个弹出层
        </t-card-section>

        <t-card-section align="right" class="bg-white text-teal">
          <t-button flat label="关闭"  @click="secondDialog = false" class="tr-button-default"/>
        </t-card-section>
      </t-card>
    </t-dialog>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    return {
      inception: ref(false),
      secondDialog: ref(false)
    }
  }
}
</script>
